<template>
  <van-form @submit="onSubmit">
    <!-- <p class="click-left-icon" @click="$router.push({ name: 'city' })"></p> -->
    <van-cell-group inset>
      <van-field
        v-model="model.phone"
        :label="`+86  v`"
        name="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true }, { pattern: /^1\d{10}$/, message: '请输入正确手机号' }]"
      />
      <van-field
        v-model="model.code"
        name="验证码"
        placeholder="请输入短信验证码"
        :rules="[{ required: true }]"
        ref="codeRef"
      >
        <template #button>
          <van-button size="small" :disabled="isDisabled" type="primary" @click="getSvg"
            >发送验证码</van-button
          >
        </template>
      </van-field>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        ref="onLogin"
        color="rgb(255, 192, 181)"
        round
        block
        type="primary"
        native-type="submit"
        :disabled="isDisabled2"
      >
        登录
      </van-button>
    </div>
  </van-form>

  <p class="policy_tip">
    <input type="checkbox" class="policy_tip-checkbox" ref="checked" @change="" />
    <span>我已阅读并同意</span>
    <a href="https://in.m.jd.com/help/app/register_info.html">《京东用户服务协议》</a>
    <a href="https://in.m.jd.com/help/app/private_policy.html">《用户隐私政策》</a>
    <span>，未注册的手机号将自动创建京东账号</span>
  </p>
</template>

<script lang="ts" setup>
import { postLogin, postSvg } from '@/api'
import { useContentStore } from '@/stores/content'
import { showToast } from 'vant/es'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
//仓库
const content = useContentStore()

//条约
const checked = ref()
//验证码
const svg = ref<number>()

//输入内容
const model = reactive({
  phone: '', //手机号
  code: '' //密码
})

//验证码按钮显示
const isDisabled = computed(() => !/^1\d{10}$/.test(model.phone))

//登录解禁
const isDisabled2 = computed(() => {
  return !(model.code.length === 4 && !isDisabled.value)
})

//提交
async function onSubmit(...res: any) {
  if (!checked.value.checked) {
    return showToast('请勾选协议')
  }
  if ((svg.value + '').length != 4) {
    return showToast('请先获取验证码')
  }
  if (+res[0]['验证码'] !== svg.value) {
    // console.log(res[0]['验证码'], svg.value)
    return showToast('验证码错误')
  }

  //发起请求
  try {
    const result = await postLogin({
      phone: model.phone,
      svg1: +res[0]['验证码'],
      svg2: svg.value
    })
    if (result.token) {
      showToast('登录成功')
      //token name存入仓库
      content.username = result.username
      content.token = result.token
      content.img = result.img
      content.phone = result.phone

      //存本地
      localStorage.setItem('user', JSON.stringify(result))

      //获取 url 地址 redirect
      const redirect = route.query.redirect as string
      //跳路由
      setTimeout(() => {
        //是否有记录
        if (redirect) {
          router.replace(redirect)
        } else {
          router.back()
        }
      }, 300)
    }
  } catch (error) {
    showToast('登录失败')
  }
}

//
//获取验证码
async function getSvg() {
  const result = await postSvg({
    phone: model.phone,
    type: '1'
  })
  svg.value = result.svgCood

  showToast(`验证码是${svg.value}，记好了`)
}
</script>

<style scoped>
.van-button--small {
  background-color: #fff;
  border: none;
  color: rgba(0, 0, 0, 0.3);
  border-radius: 0;
  border-left: 1px solid;
}

.policy_tip {
  font-size: 14px;
  padding-top: 200px;
  text-align: center;
  color: rgba(0, 0, 0, 0.3);
}

.policy_tip > a {
  color: #4a90e2;
}

::v-deep(.van-button--normal) {
  background-color: rgb(245, 9, 0) !important;
}
/* 255, 35, 1 */
</style>
